<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车之家</title>
    <link rel="stylesheet" href="./0907day/css/bootstrap.css">
    <script src="./0907day/js/jquery.min.js"></script>
    <script src="./0907day/js/popper.min.js"></script>
    <script src="./0907day/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./0907day/css/animate.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <style>
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
  /* .cc{
      margin-top: 7px;
  } */
        .box1 {
            padding: 150px;
            background: url("./banner22.jpg") no-repeat 0px 0px;
            background-size: cover;
        }

        .title {
            font-size: 44px;
            font-weight: 700;
        }

        .title2 {
            font-size: 24px;
            font-weight: 200;
            line-height: 3;
        }

        .titeb {
            font-size: 24px;
            line-height: 6;
        }

        .a1 {
            max-width: 310px;
            margin-bottom: 30px;
            padding: 4px;
        }

        #about {
            background: url("./ab.jpg") no-repeat 0px 0px;
            background-size: cover;
            min-height: 660px;
            padding-top: 4em;
        }

        .carousel-indicators li {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
            background-color: skyblue;
        }

        .foot {
            text-align: center;
            margin-left: -220px;
            width: 1534px;
            height: 80px;
            background: #0064d2;


        }

        .foot a {
            text-decoration: none;
            color: #ffff;
        }
        .box1{
            display: block;
            text-align: center;
        }
     
    </style>

</head>

<body>

    <div class="navbar navbar-light bg-light navbar-expand-lg">
        <a href="./项目首页.html" class="navbar-brand">CRENTAL</a>
        <button data-toggle="collapse" data-target="#bar1" class="navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="bar1" class="collapse navbar-collapse animated bounceInLeft">
            <ul class="navbar-nav">
                <li class="nav-tiem"><a href="#lunbo" id="a1" class="nav-link">轮播</a></li>
                <li class="nav-tiem"><a href="#deals" id="a2" class="nav-link">品牌</a></li>
                <li class="nav-tiem"><a href="#"  class="nav-link">车展</a></li>
                <li class="nav-tiem"><a href="#"  class="nav-link">扩展</a></li>
                <li class="nav-tiem"><a href="./摩托车.html" class="nav-link">摩托</a></li>
                <li class="nav-tiem"><a href="./跨戳/quachuo.html" class="nav-link">跨戳</a></li>
                <li class="nav-tiem"><a href="./评测/home.html" class="nav-link">车辆评测</a></li>
                <li class="nav-tiem"><a href="./关于介绍/index.html" class="nav-link  navbar">关于我们</a></li>
                <li class="nav-tiem"><a href="./新闻资讯/xinwen.html" class="nav-link">新闻资讯</a></li>
                <li class="nav-tiem"><a href="./买车页面/1.html" class="nav-link">我要买车</a></li>
                <li class="nav-tiem"><a href="./卖车页面.html" class="nav-link">我要卖车</a></li>
                <li class="nav-tiem"><a href="私人订制.html" class="nav-link">私人订制</a></li>
                <li class="nav-tiem"><a href="./联系我们/index.html" class="nav-link">联系我们</a></li>
                <li class="nav-tiem"><a href="./3D/3D相册.html" class="nav-link">3D效果图</a></li>
                <li class="nav-tiem"><a href="./登录注册/a.html" class="nav-link">登录/注册</a></li>
                <!-- <li> 
                    <div class="cc" style="color: #00000080;">
                    <div data-toggle="collapse" data-target="#c2" >导航1</div>
                    <div id="c2" class="collapse">
                        <div class="body">内容1111</div>
                        <div class="body">内容1111</div>
                        <div class="body">内容1111</div>
                    </div>
                  </div>
                </div>
                </li> -->

            </ul>
        </div>
    </div>
    </div>


    <div class="text-center  box1">
        <div class="title text-white animated bounceInLeft">COMING SOON</div>
        <div class="title2 h2 text-warning animated bounceInLeft">WE ARE READY TO LAUNCH OUR NEW CAR。</div>
        <div class="titeb text-warning animated bounceInLeft">FIND BEST RENTAL CAR</div>
        <div class="titeb text-warning animated bounceInLeft">FIND BEST RENTAL CAR</div>
        <div class="titeb text-warning animated bounceInLeft">FIND BEST RENTAL CAR</div>
    </div>

    <h1 class="text-center ">MOST POPULAR CARS</h1>
    <h2 class="text-center text-primary ">IT’S TIME TO DRIVE</h2>
    <div class="text-center" id="lunbo">
        <div id="l1" class="carousel " data-ride="carousel">
            <div class="carousel-inner">
                <div class="lb carousel-item active"><img class="w-75 " height="650"
                        src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g8.jpg" alt="">
                </div>
                <div class="lb carousel-item "><img class="w-75" height="650"
                        src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g7.jpg" alt="">
                </div>
                <div class="lb carousel-item "><img class="w-75" height="650"
                        src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g6.jpg" alt="">
                </div>
            </div>
            <ul class="carousel-indicators">
                <li data-slide-to="0" data-target="#l1" class="active"></li>
                <li data-slide-to="1" data-target="#l1"></li>
                <li data-slide-to="2" data-target="#l1"></li>
            </ul>
            <a data-slide="next" href="#l1" class="carousel-control-next">
                <span class="carousel-control-next-icon"></span>
            </a>
            <a data-slide="prev" href="#l1" class="carousel-control-prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
        </div>
    </div>


    <div class="container" id="deals">
        <h1 class="text-center ">TODAY SPECIAL DEALS</h1>
        <h2 class="text-center text-primary ">IT’S TIME TO DRIVE</h2>
        <div class="row">
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 ">
                <div class="border  mx-auto a1">
                    <div class="text-center msgbox">
                        <h3 class=""><a style="text-decoration: none;" href="https://www.rolls-roycemotorcars.com.cn/zh-CN/home.html">劳斯莱斯</a></h3>
                        <div class="">Per day $300.00</div>
                        <div class="">Mon.Tue.Thu.Fri.Sat</div>
                        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.KHvTyi4LNxWm0x4S7NiGTAHaE7?w=303&h=202&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                            class="down w-100 " style="height: 250px;" alt="">

                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="border  mx-auto a1">
                    <div class="text-center msgbox">
                        <h3 class="t1 h3"><a style="text-decoration: none;" href="https://www.maserati.com/cn/zh">玛莎拉蒂</a></h3>
                        <div class="t2">Per day $300.00</div>
                        <div class="t3">Mon.Tue.Thu.Fri.Sat</div>
                        <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/s5.jpg"
                            class="down w-100 " alt="">
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="border  mx-auto a1">
                    <div class="text-center msgbox">
                        <h3 class="t1 h3"><a style="text-decoration: none;" href="https://www.mercedes-benz.com.cn/">奔驰</a></h3>
                        <div class="t2">Per day $300.00</div>
                        <div class="t3">Mon.Tue.Thu.Fri.Sat</div>
                        <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g8.jpg"
                            class="down w-100 " style="height: 250px;" alt="">

                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
                <div class="border  mx-auto a1">
                    <div class="text-center msgbox">
                        <h3 class="t1 h3"><a style="text-decoration: none;" href="https://www.bmw.com.cn/zh/index.html">宝马</a></h3>
                        <div class="t2">Per day $300.00</div>
                        <div class="t3">Mon.Tue.Thu.Fri.Sat</div>
                        <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/s1.jpg"
                            class="down w-100 " alt="">
                    </div>
                </div>
            </div>
        </div>
        <div>
            
   <div class="asd">

        <h1 class="text-center ">OUR LATEST CARS</h1>
        <div class="row" id="cars">

            <div class="col-md-4">
                <div class=" mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g1.jpg"
                        class="w-100 pimg zx" style="animation-duration:1s; animation-delay: 0.3s; " alt="">
                        <!-- 需要放大的图片 -->
 
    <!-- 图片放大后的遮罩层 -->
    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
        <!-- 放大后的图片 -->
        <div id="innerdiv" style="position:absolute;z-index: 2000">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="  mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g2.jpg"
                        class="w-100 pimg cz" style="animation-duration:1s; animation-delay: 0.3s;" alt="">
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
                            <!-- 放大后的图片 -->
                            <div id="innerdiv" style="position:absolute;z-index: 2000">
                                <img id="bigimg" style="border:5px solid #fff;" src="" />
                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="  mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g3.jpg"
                        class="w-100 pimg cz" style="animation-duration:1s; animation-delay: 0.3s; " alt="">
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
                            <!-- 放大后的图片 -->
                            <div id="innerdiv" style="position:absolute;z-index: 2000">
                                <img id="bigimg" style="border:5px solid #fff;" src="" />
                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="  mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g4.jpg"
                        class=" pimg cz" style="animation-duration:1s; animation-delay: 0.3s;padding: 10px; width: 560px;margin-left: -10px; " alt="">
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
                            <!-- 放大后的图片 -->
                            <div id="innerdiv" style="position:absolute;z-index: 2000">
                                <img id="bigimg" style="border:5px solid #fff;" src="" />
                            </div>
                        </div>
                    </div>
            </div>
            <div class="col-md-6">
                <div class=" mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g5.jpg"
                        class="pimg zx" style="animation-duration:1s; animation-delay: 0.3s;padding: 10px; width: 560px;margin-left: -10px" alt="">
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
                            <!-- 放大后的图片 -->
                            <div id="innerdiv" style="position:absolute;z-index: 2000">
                                <img id="bigimg" style="border:5px solid #fff;" src="" />
                            </div>
                        </div>
                    </div>
            </div>
            <div class="col-md-4">
                <div class=" mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g1.jpg"
                        class="w-100 pimg zx" style="animation-duration:1s; animation-delay: 0.3s;" alt="">
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
                            <!-- 放大后的图片 -->
                            <div id="innerdiv" style="position:absolute;z-index: 2000">
                                <img id="bigimg" style="border:5px solid #fff;" src="" />
                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class=" mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g2.jpg"
                        class="w-100 pimg zx" style="animation-duration:1s; animation-delay: 0.3s;" alt="">
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
                            <!-- 放大后的图片 -->
                            <div id="innerdiv" style="position:absolute;z-index: 2000">
                                <img id="bigimg" style="border:5px solid #fff;" src="" />
                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="  mx-auto ">
                    <img src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/g3.jpg"
                        class="w-100 pimg zx" style="animation-duration:1s; animation-delay: 0.3s;padding-bottom: 10px;" alt="">
                        <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2000;width:100%;height:100%;display:none;">
                            <!-- 放大后的图片 -->
                            <div id="innerdiv" style="position:absolute;z-index: 2000">
                                <img id="bigimg" style="border:5px solid #fff;" src="" />
                                
                            </div>
                        </div>
                </div>
            </div>
        </div>

    </div>
        <div class="about row" id="about" >
            <div class="container text-center text-light">
                <div class="wthree_title_agile two ">
                    <h3>About <span>Us</span></h3>
                </div>
                <p class="sub_para two">It’s time to drive</p>
                <div class="inner_w3l_agile_grids">
                    <div class="col-md-6 about-left-w3layouts">
                        <h6 class="sub">WELCOME TO OUR Rental Car</h6>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the industry's standard dummy text ever since the 1500s, rds which don't look even
                            slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure
                            there isn't anything embarrassing hidden in the middle of text.</p>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-6">
                        <div class="border  mx-auto a1">
                            <div class="text-center msgbox">
                                <h3 class="t1 h3">DEAL 1</h3>
                                <div class="t2">Per day $300.00</div>
                                <div class="t3">Mon.Tue.Thu.Fri.Sat</div>
                                <div><img
                                        src="https://demosc.chinaz.net/Files/DownLoad/moban/202109/moban5738/images/s4.jpg"
                                        class="w-100" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="foot">
            <span><a href="https://mail.qq.com/"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;发送QQ邮件</a></span>
            <br>
            <span><a href=""> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;二手豪车售卖网 版权所有 小蠢洁15716327919</a></span>
            <br>

            <span><a href="">Copyright © 2021.Company name All rights reserved</a></span>
        </div>
        <script>

            var nav = document.querySelector('#a1')
            var serve = document.querySelector('#lunbo')
            nav.addEventListener('click', () => {
                let scollHeight = serve.offsetTop; //获取元素到顶部的距离
                var current = document.documentElement.scrollTop
                const location = setInterval(() => {
                    //   当前滚动位置小于元素到顶部的距离
                    if (current <= scollHeight) {
                        window.scrollTo(current, current += 10);
                    } else {
                        clearInterval(location)
                    }
                }, 3)
            })
            
            var nav1 = document.querySelector('#a2')
            var serve1 = document.querySelector('#deals')
            nav1.addEventListener('click', () => {
                let scollHeight = serve1.offsetTop;
                var current = document.documentElement.scrollTop
                const location = setInterval(() => {

                    if (current <= scollHeight) {
                        window.scrollTo(current, current += 12);
                    } else {
                        clearInterval(location)
                    }
                }, 3)
            })


           
            window.onscroll = function () {
                var top = document.documentElement.scrollTop
                console.log(top);
                if (top >= 500) {
                    $('.lb').addClass('animated fadeInDown')
                }

                if (top >= 1200) {
                    $('.down').addClass('animated fadeInDown')
                }
                if (top >= 1800) {
                    $('.cz').addClass('animated bounceInLeft ')
                }
                if (top >= 1800) {
                    $('.zx').addClass('animated bounceInRight')
                }
            }
        

        // 图片点击事件
        $('.pimg').click(function () {
            enlarge(this);
        })
 
        // 图片放大函数
        function enlarge(obj) {
 
            var _this = $(obj);
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
 
 
            function imgShow(outerdiv, innerdiv, bigimg, _this) {
                var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性  
                $(bigimg).attr("src", src); //设置#bigimg元素的src属性  
 
                /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                $("<img/>").attr("src", src).load(function () {
                    var windowW = $(window).width(); //获取当前窗口宽度  
                    var windowH = $(window).height(); //获取当前窗口高度  
                    var realWidth = this.width; //获取图片真实宽度  
                    var realHeight = this.height; //获取图片真实高度  
                    var imgWidth, imgHeight;
                    var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放  
 
                    if (realHeight > windowH * scale) { //判断图片高度  
                        imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放  
                        imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度  
                        if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度  
                            imgWidth = windowW * scale; //再对宽度进行缩放  
                        }
                    } else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度  
                        imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放  
                        imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度  
                    } else { //如果图片真实高度和宽度都符合要求，高宽不变  
                        imgWidth = realWidth;
                        imgHeight = realHeight;
                    }
                    $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放  
 
                    var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距  
                    var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距  
                    $(innerdiv).css({
                        "top": h,
                        "left": w
                    }); //设置#innerdiv的top和left属性  
                    $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg  
                });
 
                $(outerdiv).click(function () { //再次点击淡出消失弹出层  
                    $(this).fadeOut("fast");
                });
            }
        }
        </script>
</body>

</html>